<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" href="../css/aui.css" />
    <link rel="stylesheet" href="../css/public-head.css" />
    <link rel="stylesheet" href="../css/mui.css" />
    <style>
        /*头部样式*/

        .public-head>div:nth-child(1) {
            justify-content: flex-start;
            flex: 3;
            display: flex;
            align-items: center;
        }

        .close {
            overflow: hidden;
            display: flex;
        }

        .close img {
            width: 15px;
            height: 15px;
            margin-left: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /*头部样式结束*/

        .friends {
            width: 100%;
            padding-left: 35px;
            padding-right: 35px;
        }

        .fri-1>img {
            width: 100%;
            height: 186px;
            margin-top: 11px;
        }

        .fri-2 {
            width: 100%;
            padding-left: 5px;
            padding-right: 5px;
        }

        .fri-2>p {
            font-size: 15px;
            font-weight: 700;
            margin-top: 46px;
        }

        .fri-2>div {
            margin-top: 14px;
        }

        .fri-2>div>p {
            display: inline;
            padding: 0;
            font-size: 15px;
            font-weight: 700;
        }

        .fri-2>div>span {
            font-size: 28px;
            font-weight: 700;
            color: #0A5AF9;
            text-align: center;
            margin-left: 5px;
        }

        .fri-3 {
            width: 100%;
            padding-left: 5px;
            padding-right: 5px;
        }

        .fr-1 {
            width: 100%;
            padding-top: 28px;
        }

        .fr-1>input {
            height: 39px;
            border: 1px solid #BFBFBF;
            border-radius: 40px;
            line-height: 39px;
        }

        .fr-2>input {
            width: 50%;
            height: 39px;
            border: 1px solid #BFBFBF;
            border-radius: 40px;
            line-height: 39px;
            margin-top: 13px;
        }

        .fr-2>div {
            position: absolute;
            right: 47px;
        }

        .fr-1>input,
        button,
        textarea {
            border: 0;
            padding-left: 10px;
            font-size: 12px;
            line-height: 1em;
            -webkit-appearance: none;
            background-color: rgba(0, 0, 0, 0);
            border: 1px solid #BFBFBF;
        }

        .fr-2>input,
        button,
        textarea {
            border: 0;
            padding-left: 10px;
            font-size: 12px;
            line-height: 1em;
            -webkit-appearance: none;
            background-color: rgba(0, 0, 0, 0);
            border: 1px solid #BFBFBF;
        }
        /*小按钮*/

        .fr-2>.aui-btn {
            display: inline-block;
            font-size: 13px;
            font-weight: 500;
            color: #FFFEFE;
            font-family: inherit;
            text-decoration: none;
            text-align: center;
            background: #0A5AFA;
            height: 40px;
            width: 99px;
            line-height: 40px;
            border-radius: 0.2rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: middle;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-user-select: none;
            margin-top: -50px;
        }
        /*接受好友邀请按钮*/

        .fr-3 {
            position: relative;
            padding-top: 18PX;
            padding-bottom: 78px;
            width: 100%;
            margin: 0 auto;
        }

        .fr-3 div {
            font-size: 15px;
        }
        /*大按钮*/

        .aui-btn-block {
            display: block;
            width: 100%;
            height: 2.5rem;
            line-height: 2.55rem;
            margin-bottom: 0;
            font-size: 0.9rem;
        }

        .fr-3>.aui-btn {
            /*position: relative;*/
            display: inline-block;
            font-size: 0.7rem;
            font-weight: 500;
            color: #FFFEFE;
            font-family: inherit;
            text-decoration: none;
            text-align: center;
            background: #0A5AFA;
            padding: 0 0.6rem;
            height: 45px;
            line-height: 45px;
            border-radius: 40px;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: middle;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-user-select: none;
            user-select: none;
        }
    </style>
</head>

<body>
    <div class="friends">
        <div class="fri-1">
            <img src="../image/icon/chahua@2x.png" />
        </div>

        <div class="fri-2">
            <p>您的好友邀请您注册车车侠</p>
            <div>
                <p>您将获得一张</p><span>8元</span>
                <p style="margin: auto;">洗车券</p>
            </div>
            <div>
                <p>以及一张</p><span>5元</span>
                <p style="margin: auto;">代金券</p>
            </div>
        </div>

        <div class="fri-3">
            <div class="fr-1"><input type="number" name="" id="username" value="" placeholder="请输入手机号码" /></div>
            <div class="fr-2">
                <input type="text" name="" id="" value="" placeholder="请输入验证码" />
                <div class="aui-btn" tapmode onclick="sendCode()">获取验证码</div>
            </div>
            <div class="fr-3">
                <div class="aui-btn aui-btn-block">接受好友邀请</div>
            </div>

        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-slide.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript" src="../script/public-head.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript" src="../script/rem.js"></script>
<script type="text/javascript">
    headInner({
        title: "邀请页面",
        //headleft
        headl: '<a href="#" style="color:white" class="close"><img src="../image/icon/dX@2x.png" alt="" tapmode onclick="api.closeWin()"/></a>',
        //headright
        headr: '<a style="color:white"></a>',
        color: "", //默认是蓝色
        padding: "0px 0px 0px",
    })

    function mine_2() {
        /*api.openWin({
        	name: 'mine_2',
        	url: '../html/mine_2.html'
        });*/
        api.openFrame({
            name: 'mine_2',
            url: '../html/mine_2.html',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            }
        });
    }
    //验证码发送
    /*------------------短信验证-------------------------*/
    var after = '';
    var InterValObj; //timer变量，控制时间
    var count = 60; //间隔函数，1秒执行
    var curCount = 60; //当前剩余秒数
    var exp = new Date();
    var time;
    time = exp.getTime();
    //获取cookie值
    function getCookie(name) {
      var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
      if (arr = document.cookie.match(reg))
        return unescape(arr[2]);
      else
        return null;
    }
    //这是有设定过期时间的使用示例：
    //s20是代表20秒
    //h是指小时，如12小时则是：h12
    //d是天数，30天则：d30
    //设置cookie
    function setCookie(name, value, time) {
      var strsec = getsec(time);
      var exp = new Date();
      exp.setTime(exp.getTime() + strsec * 1);
      document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
    }

    function getsec(str) {
      // alert(str);
      var str1 = str.substring(1, str.length) * 1;
      var str2 = str.substring(0, 1);
      if (str2 == "s") {
        return str1 * 1000;
      } else if (str2 == "h") {
        return str1 * 60 * 60 * 1000;
      } else if (str2 == "d") {
        return str1 * 24 * 60 * 60 * 1000;
      }
    }

    function sendCode() {
      if (getCookie('after') > time && document.cookie.indexOf('after=') != -1) {
        api.toast({ //提示框1秒
          msg: ' 请不要在60秒内重复获取验证码! ',
          duration: 1100,
          location: 'top'
        })
      } else {
        trySend(); //调用一次
      }

    }

    function trySend() {
      if (getCookie('after') < time || document.cookie.indexOf('after=') == -1 || getCookie('after') == null) {
        var cellPhoneNumber = $api.byId('username').value;
        console.log(cellPhoneNumber);
        api.ajax({
          url: URL + 'auth/sendCodeSMS', //短信验证
          method: 'POST',
          data: {
            values: {
              mobile: cellPhoneNumber
            }
          }
        }, function(ret, err) {
          if (ret.code == 200) {
            api.toast({
              msg: "车车侠：" + ret.message,
              duration: 2000,
              location: 'bottom',
              global: true,
            });
            setCookie("after", time + 60 * 1000, "s60");
            // setCookie("phone", $('#phone').val(), "s60");
            setCookie("phone", $api.byId('username').value, "s60");
            curCount = count;
            //设置button效果，开始计时
            // $("#btnSendCode").attr("disabled", "true");
            $api.byId('btnSendCode').setAttribute("disabled", "true");
            // $("#btnSendCode").val(curCount + "秒后重新获取");
            $api.byId('btnSendCode').value = (curCount + "秒后重新获取");
            InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
          } else {
            reToast(ret, err);
          }
        });


      }
    }
    //timer处理函数
    function SetRemainTime() {
      if (curCount == 0) {
        window.clearInterval(InterValObj); //停止计时器
        // $("#btnSendCode").removeAttr("disabled"); //启用按钮
        $api.byId('btnSendCode').removeAttribute("disabled");
        $api.byId('btnSendCode').innerHTML = ("重新发送验证码");
        // $("#btnSendCode").val("重新发送验证码");
        // code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
      } else {
        curCount--;
        // $("#btnSendCode").val(curCount + "秒后重新获取");
        $api.byId('btnSendCode').innerHTML = (curCount + "秒后重新获取");
      }
    }
    /*------------------短信验证结束-------------------------*/
</script>

</html>
